<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/bundle.js"></script>
    <script src="../../static/js/svg-pan-zoom.js"></script>
    <style>
        html, body {
            height: 100%;
        }

        #container {
            width: 100%;
            height: 90%;
        }

        #demo-tiger {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="container" style="  border:1px solid black; ">
    <svg id="demo-tiger" xmlns="http://www.w3.org/2000/svg"
         style="overflow: hidden; display: inline;  "
         version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
        {% for b in block %}
            <g class="{{ b.4 }}  {{ b.5 }}">
                <rect x="{{ b.0 }}" y="{{ b.1 }}" height="{{ b.3 }}" width="{{ b.2 }}"
                      style=";stroke:black;stroke-width:0px;fill-opacity:0;stroke-opacity:0;"></rect>
            </g>

        {% endfor %}
    </svg>

</div>
<button id="enable">enable</button>
<button id="disable">disable</button>
<p>
    <span>Layer</span>
    {% for layer in layer_group %}
        <span style="margin: 10px"><input id="{{ layer }}" onclick="layer_highlight(this)" type="checkbox"><label
                for="{{ layer }}">{{ layer }}</label></span>
    {% endfor %}
</p>
<p>
    <span>Net</span>
    {% for net in net_group %}
        <span style="margin: 10px"><input id="{{ net }}" onclick="net_highlight(this)" type="checkbox"><label
                for="{{ net }}">{{ net }}</label></span>
    {% endfor %}
</p>
{#<svg style="width: {{ max_size.0 }};height: {{ max_size.1 }}">#}
{#    {% for b in block %}#}
{#        <g>#}
{#            <rect x="{{ b.0 }}" y="{{ b.1 }}" height="{{ b.3 }}" width="{{ b.2 }}"#}
{#                  style="fill:white;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"></rect>#}
{#        </g>#}
{##}
{#    {% endfor %}#}
{##}
{#</svg>#}
<script>
    // Don't use window.onLoad like this in production, because it can only listen to one function.
    window.onload = function () {
        // Expose to window namespase for testing purposes
        window.zoomTiger = svgPanZoom('#demo-tiger', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            fit: true,
            center: true,
            // viewportSelector: document.getElementById('demo-tiger').querySelector('#g4') // this option will make library to misbehave. Viewport should have no transform attribute
        });

        document.getElementById('enable').addEventListener('click', function () {
            window.zoomTiger.enableControlIcons();
        })
        document.getElementById('disable').addEventListener('click', function () {
            window.zoomTiger.disableControlIcons();
        })
    };

    function layer_highlight(element) {
        const id = element.id
        const color_dict = {
            '8-0': 'GoldEnrod',
            '12-0': 'FloralWhite',
            '9-0': 'OldLace',
            '11-0': 'Wheat',
            '111-0': 'Moccasin',
            '24-0': 'Orange',
            '23-0': 'PapayaWhip',
            '6-0': 'BlanchedAlmond',
            '3-0': 'NavajoWhite',
            '7-0': 'AntiqueWhite',
            '114-0': 'Tan',
            '10-0': 'BrulyWood'
        }
        const target_ele = document.getElementsByClassName(id)
        if (element.checked) {
            for (let i = 0; i < target_ele.length; i++) {
                const e = target_ele[i].children[0]
                target_ele[i].children[0].style['stroke'] = 'black'

                target_ele[i].children[0].style['stroke-width'] = 5
                target_ele[i].children[0].style['stroke-opacity'] = 1
                {#"stroke-width:1px;fill-opacity:0.5;stroke-opacity:1;"#}
                target_ele[i].children[0].style['fill-opacity'] = 0.2
                target_ele[i].children[0].style.fill = color_dict[id]
                target_ele[i].children[0].style.visibility='visible'
            }
        } else {
            for (let i = 0; i < target_ele.length; i++) {
                {#target_ele[i].children[0].style['stroke'] = 'black'#}
                {##}
                {#target_ele[i].children[0].style['stroke-width'] = 0#}
                {#target_ele[i].children[0].style['stroke-opacity'] = 0#}
                {#"stroke-width:1px;fill-opacity:0.5;stroke-opacity:1;"#}
                {#target_ele[i].children[0].style['fill-opacity'] = 0#}
                {#target_ele[i].children[0].style.fill = null#}
                target_ele[i].children[0].style.visibility='hidden'
            }
        }

    }

    function net_highlight(element) {
        const id = element.id
        const color_dict = {
            '8-0': 'GoldEnrod',
            '12-0': 'FloralWhite',
            '9-0': 'OldLace',
            '11-0': 'Wheat',
            '111-0': 'Moccasin',
            '24-0': 'Orange',
            '23-0': 'PapayaWhip',
            '6-0': 'BlanchedAlmond',
            '3-0': 'NavajoWhite',
            '7-0': 'AntiqueWhite',
            '114-0': 'Tan',
            '10-0': 'BrulyWood'
        }
        const target_ele = document.getElementsByClassName(id)
        if (element.checked) {
            for (let i = 0; i < target_ele.length; i++) {
                const e = target_ele[i].children[0]
                target_ele[i].children[0].style.fill = 'red'
                target_ele[i].children[0].style['fill-opacity'] = 0.5
                target_ele[i].children[0].style['stroke'] = 'Cyan'
            }
        } else {
            for (let i = 0; i < target_ele.length; i++) {
                const e = target_ele[i].children[0]
                target_ele[i].children[0].style.fill = ''
                target_ele[i].children[0].style['fill-opacity'] = 0
                target_ele[i].children[0].style['stroke'] = 'black'
            }
        }

    }
</script>
</body>
</html>